<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物联网控制中心 - 登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: '#F5F7FA',
                        dark: '#1D2129'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-iot {
                background: linear-gradient(135deg, #165DFF 0%, #36CFC9 100%);
            }
            .card-shadow {
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            }
            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-6xl flex flex-col md:flex-row rounded-2xl overflow-hidden card-shadow">
        <!-- 左侧品牌区域 -->
        <div class="w-full md:w-1/2 bg-gradient-iot p-8 md:p-12 text-white flex flex-col justify-between">
            <div>
                <div class="flex items-center mb-12">
                    <i class="fa fa-connectdevelop text-3xl mr-3"></i>
                    <h1 class="text-2xl font-bold">物联网控制中心</h1>
                </div>
                
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">智能设备管理平台</h2>
                <p class="text-white/80 mb-8 max-w-md">
                    集中监控和管理所有物联网设备，实时获取数据，远程控制，让智能生活触手可及。
                </p>
                
                <div class="space-y-6">
                    <div class="flex items-start">
                        <div class="bg-white/20 p-3 rounded-lg mr-4">
                            <i class="fa fa-shield text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">安全可靠</h3>
                            <p class="text-white/70">多重认证保护，确保设备和数据安全</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-white/20 p-3 rounded-lg mr-4">
                            <i class="fa fa-bolt text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">实时监控</h3>
                            <p class="text-white/70">实时获取设备状态，及时响应异常情况</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-white/20 p-3 rounded-lg mr-4">
                            <i class="fa fa-cogs text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">智能控制</h3>
                            <p class="text-white/70">远程操控设备，实现智能化管理</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-12 text-white/60 text-sm">
                &copy; 2025 物联网控制中心 版权所有
            </div>
        </div>
        
        <!-- 右侧登录表单 -->
        <div class="w-full md:w-1/2 bg-white p-8 md:p-12 flex flex-col">
            <div class="mb-10">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2">欢迎登录</h2>
                <p class="text-gray-500">请输入账号密码访问系统</p>
            </div>
            
            <!-- 登录表单 -->
            <form id="loginForm" method="post" action="/" class="space-y-6 flex-grow">
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                            <i class="fa fa-user"></i>
                        </div>
                        <input type="text" id="username" name="username" 
                               class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus transition-all"
                               placeholder="请输入用户名" value="admin" required>
                    </div>
                </div>
                
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                            <i class="fa fa-lock"></i>
                        </div>
                        <input type="password" id="password" name="password" 
                               class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus transition-all"
                               placeholder="请输入密码" value="admin" required>
                        <button type="button" id="togglePassword" 
                                class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-primary">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="rememberMe" name="rememberMe" type="checkbox" 
                               class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                        <label for="rememberMe" class="ml-2 block text-sm text-gray-700">
                            记住我
                        </label>
                    </div>
                    <a href="#" class="text-sm text-primary hover:text-primary/80">
                        忘记密码?
                    </a>
                </div>
                
                <div>
                    <button type="submit" id="loginButton"
                            class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all flex items-center justify-center">
                        <span>登录</span>
                        <i class="fa fa-arrow-right ml-2"></i>
                    </button>
                </div>
            </form>
            
            <div class="mt-8 text-center text-gray-500 text-sm">
                <p>© 2025 物联网控制中心 技术支持</p>
            </div>
        </div>
    </div>

    <script>
        // 密码显示/隐藏切换
        const togglePassword = document.getElementById('togglePassword');
        const password = document.getElementById('password');
        
        togglePassword.addEventListener('click', () => {
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            
            // 切换图标
            togglePassword.querySelector('i').classList.toggle('fa-eye');
            togglePassword.querySelector('i').classList.toggle('fa-eye-slash');
        });
        
        // 表单提交处理
        const loginForm = document.getElementById('loginForm');
        const loginButton = document.getElementById('loginButton');
        
        // 控制中心页面的正确路径（与实际文件路径保持一致）
        const CONTROL_CENTER_PATH = 'index.html'; // 重点：修改为实际的控制中心页面文件名
        
        loginForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            // 显示加载状态
            loginButton.disabled = true;
            loginButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 登录中...';
            
            try {
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                
                // 这里可以添加前端简单验证
                if (!username || !password) {
                    alert('请输入用户名和密码');
                    throw new Error('用户名或密码为空');
                }
                
                // 构建表单数据
                const formData = new FormData();
                formData.append('username', username);
                formData.append('password', password);
                formData.append('rememberMe', document.getElementById('rememberMe').checked ? '1' : '0');
                
                // 发送登录请求
                const response = await fetch('/', {
                    method: 'POST',
                    body: formData,
                    credentials: 'include'
                });
                
                // 检查HTTP响应状态
                if (!response.ok) {
                    throw new Error(`登录失败: HTTP状态码 ${response.status}`);
                }
                
                // 解析服务器响应
                const result = await response.json().catch(() => {
                    // 如果服务器返回的不是JSON，尝试文本解析
                    return { success: true }; // 假设登录成功
                });
                
                // 登录成功处理
                if (result.success || response.ok) {
                    // 存储用户名到本地存储
                    localStorage.setItem('usr_user_name', username);
                    
                    // 验证控制页面是否存在
                    try {
                        // 预检查页面是否存在
                        const pageCheck = await fetch(CONTROL_CENTER_PATH, { method: 'HEAD' });
                        if (pageCheck.ok) {
                            // 页面存在，执行跳转
                            window.location.href = CONTROL_CENTER_PATH;
                        } else {
                            throw new Error(`控制页面不存在: ${CONTROL_CENTER_PATH}`);
                        }
                    } catch (checkError) {
                        console.error('页面检查失败:', checkError);
                        alert(`跳转失败: 控制页面 "${CONTROL_CENTER_PATH}" 不存在，请检查路径是否正确`);
                        // 恢复按钮状态
                        loginButton.disabled = false;
                        loginButton.innerHTML = '<span>登录</span><i class="fa fa-arrow-right ml-2"></i>';
                    }
                } else {
                    // 登录失败处理
                    alert(`登录失败: ${result.message || '用户名或密码错误'}`);
                    loginButton.disabled = false;
                    loginButton.innerHTML = '<span>登录</span><i class="fa fa-arrow-right ml-2"></i>';
                }
                
            } catch (error) {
                console.error('登录错误:', error);
                alert(`登录失败: ${error.message}`);
                loginButton.disabled = false;
                loginButton.innerHTML = '<span>登录</span><i class="fa fa-arrow-right ml-2"></i>';
            }
        });
        
        // 页面加载完成后自动聚焦到用户名输入框
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('username').focus();
        });
    </script>
</body>
</html>
